<div class="card">
    <div data-th-include="system/role/roleAdd"></div>
    <div class="tpv-main-header clearfix">
        <div class="tpv-main-tab j-main-tab"></div>
        <div id="data-table_filter" class="dataTables_filter tpv-main-filter">
            <form class="role-table-form j-tpv-search">
                <div class="tpv-filter-layout">
                    <div class="tpv-filter-item" style="margin-right: 10px;">
                        <div class="input-group">
                            <span class="input-group-addon">[[#{role}]]： </span>
                            <div class="form-group">
                                <input type="text" name="roleName" class="form-control"> <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                    <div class="tpv-filter-item tpv-filter-auto">
                        <button type="button" class="btn tpv-btn-warning" onclick="refresh()" th:title="#{common.btn.reset}">[[#{common.btn.reset}]]</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card-block">
        <div class="table-responsive">
            <div id="data-table_wrapper" class="dataTables_wrapper">
                <div class="dataTables_buttons hidden-sm-down actions tpv-table-btns clearfix">
                    <div class="tpv-table-group-btns clearfix">
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="refresh()">[[#{user.flush}]]</button>
                        <!-- <div class="dropdown actions__item tpv-group-item tpv-dropdown">
                            <button type="button" data-toggle="dropdown" class="btn tpv-btn-default btn-secondary">[[#{common.btn.export}]]</button>
                            <ul class="dropdown-menu dropdown-menu-left">
                                <a href="javascript:void(0)" class="dropdown-item" data-table-action="excel" onclick="exportRoleExcel()">
                                Excel (.xlsx) </a>
                                <a href="javascript:void(0)" class="dropdown-item" data-table-action="csv" onclick="exportRoleCsv()"> CSV
                                (.csv) </a>
                            </ul>
                        </div> -->
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="updateRole()" shiro:hasPermission="role:update">[[#{role.update}]]</button>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deleteRoles()" shiro:hasPermission="role:delete">[[#{role.delete}]]</button>        
                    </div>
                    <div class="tpv-table-info-other">
                        <button type="button" class="btn tpv-btn-primary btn-secondary" data-toggle="modal" data-target="#role-add"  shiro:hasPermission="role:add">[[#{role.add}]]</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{js/app/system/role/role.js(t=${version})}"></script>
<script data-th-src="@{js/app/system/role/roleEdit.js(t=${version})}"></script>